import { watch, watchEffect, ref, computed, CSSProperties, type Ref } from 'vue'
import { useDraggable } from '@vueuse/core'
 
export default function useModalDrag(targetEle: Ref<HTMLElement | undefined>) {
  const { x, y, isDragging } = useDraggable(targetEle)
 
  const startX = ref<number>(0)
  const startY = ref<number>(0)
  const startedDrag = ref(false)
  const transformX = ref(0)
  const transformY = ref(0)
  const preTransformX = ref(0)
  const preTransformY = ref(0)
  const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 })
 
  watch([x, y], () => {
    console.log(x,y)
    if (!startedDrag.value) {
      startX.value = x.value
      startY.value = y.value
      const bodyRect = document.body.getBoundingClientRect()
      const titleRect = targetEle.value?.getBoundingClientRect()
      dragRect.value.right = bodyRect.width - (titleRect?.width || 0)
      dragRect.value.bottom = bodyRect.height - (titleRect?.height || 0)
      preTransformX.value = transformX.value
      preTransformY.value = transformY.value
    }
    startedDrag.value = true
  })
  watch(isDragging, () => {
    if (!isDragging) {
      startedDrag.value = false
    }
  })
 
  watchEffect(() => {
    if (startedDrag.value) {
      transformX.value = preTransformX.value + Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) - startX.value
      transformY.value = preTransformY.value + Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) - startY.value
    }
  })
 
  const transformStyle = computed<CSSProperties>(() => {
    return {
      transform: `translate(${transformX.value}px, ${transformY.value}px)`,
    }
  })
 
  return {
    transformStyle,
  }
}
 
 
 

// <a-modal v-model:visible="true">
//     <template #title>
//       <div ref="modalTitleRef" style="width: 100%; cursor: move">{{ title }}</div>
//     </template>
//     <template #modalRender="{ originVNode }">
//       <div :style="transformStyle">
//         <component :is="originVNode" />
//       </div>
//     </template>
// </a-modal>
 
 
// import useModalDrag from '@/hooks/useModalDrag'
 
// const modalTitleRef = ref<HTMLElement>()
// const { transformStyle } = useModalDrag(modalTitleRef)


//hooks
//https://blog.csdn.net/weixin_44368048/article/details/128675382 